<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{msg}}

      <Foo title="a"></Foo>
      <!-- <Foo></Foo> -->
    </div>
    <script>
      // js -> function

      // 组件 -> 函数和类似
      // 参数
      // input
      // function add(a = "123", b:string) {return ...}

      const Foo = {
        // props: ["title"],
        props: {
          title: {
            // a || b
            default: "456",
            validator(val) {
              console.log(val);
              // 组件可以接受的参数
              return val === "a" || val === "b";
            },

            type: String,
          },
        },

        // title -> 响应式对象
        data() {
          return {
            // : value
          };
        },
        computed: {
          titlePlus() {
            return this.title + "plus";
          },
        },
        template: `<div>Foo

            {{title}}
            {{titlePlus}}
            <button @click="getProps">get props</button>

          </div>`,

        methods: {
          getProps() {
            // console.log(this.$props);
            // console.log(this.title)
            // props 是不可以被修改的
            this.$props.title = "bbbbbbbbbb";
          },
        },
      };

      const app = new Vue({
        el: "#app",
        components: {
          Foo,
        },
        data: {
          msg: "hello ",
        },
      });
    </script>
  </body>
</html>
